{extend name="index/base" /}
{block name='title'}User Address{/block}
{block name='content'}

<div class="container clearfix my-5 pb-1">
    {include file="user/leftMenu" name="MY ADDRESS" route="user/address"/}

    <div class="userBox">
        <div class="addressBook js_editBox">
            <h4 class="title cleafix">
                Shipping Address
                <span class="add-address fr" id="addShipAddr" @click="handleCreate({})">+ ADD ADDRESS</span>
            </h4>
            <div class="info" id="ship_addr_list">
                <div class="list" v-for="(item,index) in list" :key="index">
                    <h5 class="name-tel fsb">
                        <span class="name">
                            <span class="js_firstName">{{item.name}}</span>
                        </span>
                        <span class="tel ml15 js_tel">{{item.phone}}</span>
                    </h5>
                    <div class="address-txt">
                        <span class="js_addrLine1">{{item.country_name}}</span>,
                        <span class="js_country_str">{{item.state+" "+item.city+item.street+" "+item.suite+" "}}</span>
                    </div>
                    <div class="zip-email">
                        <span class="zip js_zipcode">{{item.postcode}}</span>
                        <span class="email js_email ml20">{{item.email}}</span>
                    </div>
                    <div class="addr_list_btns">
                        <a href="javascript:void(0);" class="js_attr_editBtn" @click="handleCreate(item)">Edit</a>
                        <a href="javascript:void(0);" class="js_attr_deleteBtn" @click="handleDel(index,item)">Delete</a>
                        <a href="javascript:void(0);" class="set-default js_attr_defaultBtn" @click="handleDefault(item)" :class="{'current':item.is_default}">Default</a>
                    </div>

                    <span class="tag_c selectFlag"></span>
                </div>
                

                <hr class="my-3">

            </div>
            <!-- Pagination-->
            <nav class="d-flex justify-content-center pt-2" aria-label="Page navigation">
                <el-pagination  background @current-change="handlePageChange" :page-size="listQuery.limit" @size-change="handlePageSizeChange"  layout="  prev, pager, next" :total="total"> </el-pagination>

            </nav>
        </div>
    </div>
    <el-dialog
        class="customWidth"
        :title="get_dialog_title"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        top="1vh"
    >
        <el-form :model="temp" :rules="rules" ref="order" label-width="0px">

            <div class="form-item-container">
                <div class="form-item">
                    <el-form-item prop="country" class="indexstyle-sc-1p4nwz9-0 kVomof">
                        <el-select v-model="temp.country" filterable placeholder="" style="width: 100%" @change="changeCountry">
                            <el-option label="*Please select country/region" value=""></el-option>
                            <el-option
                                    v-for="(item,index) in city_list"
                                    :key="index"
                                    :label="item.name"
                                    :value="index">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </div>
            <div class="form-item-container">
                <div class="form-item">
                    <el-form-item prop="first_name" class="indexstyle-sc-1p4nwz9-0 kVomof">
                        <el-input v-model="temp.first_name" placeholder="*First name"></el-input>
                    </el-form-item>
                </div>
                <div class="form-item">
                    <el-form-item prop="last_name" class="indexstyle-sc-1p4nwz9-0 kVomof">
                        <el-input v-model="temp.last_name" placeholder="*Last name"></el-input>
                    </el-form-item>
                </div>
            </div>
            <div class="form-item-container">
                <div class="form-item">
                    <el-form-item prop="email"  class="indexstyle-sc-1p4nwz9-0 kVomof">
                        <el-input v-model="temp.email" placeholder="*input email"></el-input>
                    </el-form-item>
                </div>
            </div>
            <div class="form-item-container">
                <div class="form-item">
                    <el-form-item prop="street"  class="indexstyle-sc-1p4nwz9-0 kVomof">
                        <el-input v-model="temp.street" :placeholder="'*'+(get_country_info_label.address1?get_country_info_label.address1:'Address: Street name and house number')"></el-input>
                    </el-form-item>
                </div>
            </div>

            <div class="form-item-container">
                <div class="form-item">
                    <el-form-item prop="suite" class="indexstyle-sc-1p4nwz9-0 kVomof">
                        <el-input v-model="temp.suite" :placeholder="'*'+(get_country_info_label.address2?get_country_info_label.address2:'Apartment, suite, etc. (optional)')"></el-input>
                    </el-form-item>
                </div>
            </div>

            <div class="form-item-container">
                <!--<div class="form-item">
                    <el-form-item prop="state" class="indexstyle-sc-1p4nwz9-0 kVomof">
                        <el-input v-model="temp.state" placeholder="*State/Province"></el-input>
                    </el-form-item>
                </div>-->
                <div class="form-item" v-if="get_country_info_address_format_edit_field.indexOf('province')>-1 && get_country_info.provinces && Object.keys(get_country_info.provinces).length>0">
                    <el-form-item prop="province" class="indexstyle-sc-1p4nwz9-0 kVomof">
                        <el-select v-model="temp.state"  :placeholder="'*'+(get_country_info_label.province?get_country_info_label.province:'State')" style="width: 100%">
                            <el-option
                                    v-for="(item,index) in get_country_info.provinces"
                                    :key="index"
                                    :label="item.name"
                                    :value="index">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="form-item">
                    <el-form-item prop="city" class="indexstyle-sc-1p4nwz9-0 kVomof" v-show="get_country_info_address_format_edit_field.indexOf('city')>-1">
                        <el-input v-model="temp.city" :placeholder="'*'+(get_country_info_label.city?get_country_info_label.city:'City')"></el-input>
                    </el-form-item>
                </div>

                <div class="form-item" v-if="get_country_info_address_format_edit_field.indexOf('region')>-1 && get_country_info.provinces && Object.keys(get_country_info.provinces).length>0">
                    <el-form-item prop="province" class="indexstyle-sc-1p4nwz9-0 kVomof">
                        <el-select v-model="temp.state"  placeholder="*Region" style="width: 100%">
                            <el-option
                                    v-for="(item,index) in get_country_info.provinces"
                                    :key="index"
                                    :label="item.name"
                                    :value="index">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>

                <div class="form-item">
                    <el-form-item prop="postcode" class="indexstyle-sc-1p4nwz9-0 kVomof" v-show="get_country_info_address_format_edit_field.indexOf('postcode')>-1">
                        <el-input v-model="temp.postcode" :placeholder="'*'+(get_country_info_label.zip?get_country_info_label.zip:'Postal Code')"></el-input>
                    </el-form-item>
                </div>
            </div>



            <div class="form-item-container">
                <div class="form-item">
                    <el-form-item prop="phone" class="indexstyle-sc-1p4nwz9-0 kVomof">
                        <el-input v-model="temp.phone" placeholder="*Phone Number"></el-input>
                    </el-form-item>
                </div>
            </div>

        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">{:lang('cancel')}</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="submitLoading">{:lang('sure')}</el-button>
        </span>
    </el-dialog>
</div>

{/block}
{block name='script'}

<script>
    const city_list = {:json_encode(\\app\\common\\service\\Location::DEF_DATA)};
    const city_info = {:json_encode(\\app\\common\\service\\Location::COUNTRY_INFO)};

    layui.extend({
    }).use([], function () {
        initVue({
            data: {
                submitLoading:false,
                dialogVisible:false,

                city_list: city_list,
                city_info: city_info,

                listQuery:{
                    page:1,
                },
                list: [],
                rules: [],
                total: 0,
                total_page: 0,
                temp:{
                    id: '',
                    email:'',
                    country:'',
                    first_name:'',
                    last_name:'',
                    suite:'',
                    street:'',
                    state:'',
                    city:'',
                    // province:'',
                    postcode:'',
                    phone:'',
                },
            },
            components: {

            },
            computed: {
                get_dialog_title:function(){
                    if (!this.temp.id){
                        return 'Created'
                    } else {
                        return 'Edit'
                    }
                },
                get_country:function(){
                    const country_key = this.temp.country
                    return this.city_list[country_key]||{}
                },
                get_country_info:function(){
                    const country_name = this.get_country.value||""
                    console.log("++++",this.city_info[country_name]||{})
                    return this.city_info[country_name]||{}
                },
                get_country_info_label:function(){
                    console.log('----------',this.get_country_info.labels||{})
                    return this.get_country_info.labels||{}
                },
                get_country_info_address_format_edit:function(){
                    return (this.get_country_info.address_format||{}).edit||0
                },
                get_country_info_address_format_edit_field:function(){
                    const state = this.get_country_info_address_format_edit-0
                    var data = []
                    if(state === 2 ){
                        data = ['city']
                    }else if(state===3 ||state===4  ||state===5  ||state===10 || state===11  || state===14 ) {
                        data = ['city','postcode','province']
                    }else if(state===6 ) {
                        data = ['city','postcode','region']
                    }else if(state===7 ) {
                        data = ['postcode']
                    }else if(state===8 ) {
                        data = ['city','region']
                    }else{
                        data = ['city','postcode']
                    }
                    return data
                },
            },
            created: function () {
                console.log('+++++++created',)
            },
            mounted: function () {
                console.log('+++++++mounted', )
                this._initData()
            },
            methods: {
                _initData:function(){
                    const that = this
                    this.$network('address/lists').then(function(res){
                        var data = res.data || {}
                        that.total = data.total || 0
                        that.total_page = data.total_page || 0
                        that.list = data.list ||[]

                    })
                },
                handlePageSizeChange:function(limit){
                    this.listQuery.limit = limit
                    this._initData()
                },
                handlePageChange:function(page) {
                    this.listQuery.page = page
                    this._initData()
                },
                handleDel:function(index,item){
                    var that = this
                    this.$confirm("{:lang('tip_delete_data')}", '{:lang("tip")}',{
                        confirmButtonText: "{:lang('sure')}",
                        cancelButtonText: "{:lang('cancel')}",
                        type: 'warning'
                    }).then(function(){
                        that.$network('address/del',{id:item.id}).then(function(res){
                            that.list.splice(index,1)
                            that.$message.success(res.msg)
                        })
                    })

                },
                handleDefault:function(item){
                    if(item.is_default){
                        return
                    }
                    var that = this
                    this.$network('address/modInfo',{is_default:1,id:item.id}).then(function(res){
                        that.list.map(function(info){
                            info.is_default = 0
                        })
                        item.is_default = 1

                    })
                },
                handleCreate:function(item){
                    for (var key in this.temp) {
                        this.temp[key] = item[key] || ''
                    }
                    this.dialogVisible = true
                },
                handleSubmit :function(){
                    var that = this
                    this.submitLoading = true
                    this.$network('address/add', this.temp).then(function(res){
                        that.submitLoading = false
                        that.$message.success(res.msg)
                        that.dialogVisible = false
                        that._initData()

                    }).catch(function(){
                        that.submitLoading = false
                    })

                },

                changeCountry: function(){
                    this.temp.state = ""
                },
            },
        })


    })

</script>

{/block}